<template>
  <div class="app-container customer-div" style="overflow-x: auto">
    <el-tabs v-model="activeName">
      <el-tab-pane label="毛利情况" name="first">
        <el-form
          :inline="true"
          :model="listQuery1"
          size="mini"
          label-width="50px"
        >
          <el-form-item label="日期：" style="margin-top: 20px">
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery1.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="业务员："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-select
              style="width: 100px"
              v-model="listQuery1.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery1.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList1"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(1)"
              :loading="btnLoading1"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading1"
            :data="tableData1"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="人员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column
              label="当月审核订单吨数"
              align="center"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row.contactBeginNum }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="当月发货毛利"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.driverMaoli }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="当月发货吨毛利"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.customerNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>上年度当月</div>
                <div>审核订单吨数</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.lastAduNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>上年度当月</div>
                <div>毛利情况</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.contactEndNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>上年度当月</div>
                <div>吨毛利</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.saleNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="同比毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.tongMaoli }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="同比吨毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.tongNumMaoli }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="上月审核订单吨数"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.lastMonthAduNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="上月毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.lastMonthDriverMaoli }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="上月吨毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.lastMonthDriverNumMaoli }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="环比毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.huanMaoli }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="环比吨毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.huanNumMaoli }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery1.pageNum"
            :page-size="listQuery1.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count1"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="转售情况" name="second">
        <el-form
          :inline="true"
          :model="listQuery2"
          size="mini"
          label-width="50px"
        >
          <el-form-item label="日期：" style="margin-top: 20px">
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery2.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="业务员："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-select
              style="width: 100px"
              v-model="listQuery2.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery2.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList2"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(2)"
              :loading="btnLoading2"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="人员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="150">
              <template slot="header" slot-scope="scope">
                <div>
                  当月<br />成交客户
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="流转完成的订单"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.dealNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  当月<br />成交转售客户
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="收货省市区与注册地不一样"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.dockingNum }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="成交客户转售率"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.dockingRate }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>当月<br />成交吨数</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.orderNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>当月<br />转售吨数</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.dockingOrderNum }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="成交吨数转售率"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.dockingRateNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  当月<br />客户总数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="过滤Z、关联客户算1个，按客户负责人"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.allCustomer }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="150"
              label="当月新客户成交数"
              align="center"
            >
              <template slot="header" slot-scope="scope">
                <div>当月<br />新客户成交数</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.newDeal }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  半年及半年以上未成交<br />的客户本月成交数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="过滤Z客户，关联客户算1个"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.halfYearNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  当月在3-4阶段的<br />产品线客户数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="过滤Z客户、关联客户"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.customerCpsNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  成交A/B客户数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="过滤Z客户、关联客户算1个"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.ab }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery2.pageNum"
            :page-size="listQuery2.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count2"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="产品毛利情况" name="third">
        <el-form
          :inline="true"
          :model="listQuery3"
          size="mini"
          label-width="50px"
        >
          <el-form-item label="日期：" style="margin-top: 20px">
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery3.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="业务员："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-select
              style="width: 100px"
              v-model="listQuery3.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery3.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList3"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(3)"
              :loading="btnLoading3"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="人员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column label="牌号" align="center" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.goodsSn }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="100"
              label="当月发货数量"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.shipNum }}
              </template>
            </el-table-column>
            <el-table-column
              min-width="100"
              label="销售发货现金价格"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.shipPrice }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="吨毛利" align="center">
              <template slot-scope="scope">
                {{ scope.row.maoli }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery3.pageNum"
            :page-size="listQuery3.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count3"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="客户流转情况" name="fourth">
        <el-form
          :inline="true"
          :model="listQuery4"
          size="mini"
          label-width="50px"
        >
          <el-form-item
            label="日期："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery4.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务员：" style="margin-top: 20px">
            <el-select
              style="width: 100px"
              v-model="listQuery4.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery4.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList4"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(4)"
              :loading="btnLoading4"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading4"
            :data="tableData4"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="人员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="150">
              <template slot="header" slot-scope="scope">
                <div>
                  当月流转的客户数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="包括公海池、共享池和资源池的客户（捞进来和放出去的数量）"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.circulationNum }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery4.pageNum"
            :page-size="listQuery4.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count4"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="区域销售情况" name="five">
        <el-form
          :inline="true"
          :model="listQuery5"
          size="mini"
          label-width="50px"
        >
          <el-form-item label="日期：" style="margin-top: 20px">
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery5.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="业务员："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-select
              style="width: 100px"
              v-model="listQuery5.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery5.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList5"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(5)"
              :loading="btnLoading5"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading5"
            :data="tableData5"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="业务员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="品类" align="center">
              <template slot-scope="scope">
                {{ scope.row.goodsName }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="牌号" align="center">
              <template slot-scope="scope">
                {{ scope.row.goodsSn }}
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="150">
              <template slot="header" slot-scope="scope">
                <div>
                  区域
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="按收货地省市汇总"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.cityName }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center">
              <template slot="header" slot-scope="scope">
                <div>区域成交客户数</div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.customerNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  区域成交吨数
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="按收货地省市汇总"
                    placement="right"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </template>
              <template slot-scope="scope">
                {{ scope.row.goodsNum }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange5"
            @current-change="handleCurrentChange5"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery5.pageNum"
            :page-size="listQuery5.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count5"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="销售价格情况" name="six">
        <el-form
          :inline="true"
          :model="listQuery6"
          size="mini"
          label-width="50px"
        >
          <el-form-item label="日期：" style="margin-top: 20px">
            <el-date-picker
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy-MM"
              value-format="yyyy-MM"
              v-model="listQuery6.month"
              type="monthrange"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="业务员："
            style="margin-top: 20px"
            label-width="80px"
          >
            <el-select
              style="width: 100px"
              v-model="listQuery6.userId"
              filterable
              clearable
            >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门：" style="margin-top: 20px">
            <el-cascader
              v-model="listQuery6.departmentIds"
              :options="data"
              :props="{
                value: 'departmentId',
                label: 'departmentName',
                emitPath: false,
                multiple:true
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              style="margin-left: 10px"
              @click="handleSearchList6"
              type="primary"
            >
              查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              @click="downloadExcel(6)"
              :loading="btnLoading6"
              type="primary"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            ref="multipleTable"
            v-loading="listLoading6"
            :data="tableData6"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column align="center" label="月份" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.month }}
              </template>
            </el-table-column>
            <el-table-column label="军团" align="center" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.departmentName }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="人员" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column label="产品线" align="center" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.goodsName }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="价格类型" align="center">
              <template slot-scope="scope">
                {{ scope.row.type }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="成交数量" align="center">
              <template slot-scope="scope">
                {{ scope.row.orderNum }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="吨数" align="center">
              <template slot-scope="scope">
                {{ scope.row.goodsNum }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange6"
            @current-change="handleCurrentChange6"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery6.pageNum"
            :page-size="listQuery6.pageSize"
            :page-sizes="[10, 15, 20, 50, 100]"
            :total="count6"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const defaultListQuery1 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};
const defaultListQuery2 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};
const defaultListQuery3 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};
const defaultListQuery4 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};
const defaultListQuery5 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};
const defaultListQuery6 = {
  userId: "", //业务员id
  departmentIds: [], //部门id
  month: null, //时间
  pageNum: 1,
  pageSize: 10,
};

import {
  grossProfitList,
  customerMouth,
  financechartList,
  getGoodsLineMouth,
  getCustomerCirculation,
  getSaleAreaMouth,
  getSaleGoodsPriceMouth,
} from "@/api/company";
import halfyearPicker from "@/views/components/halfyearPicker";
import { formatDate } from "@/utils/date";
import { numberToCurrencyNo } from "@/utils/index";
import { getDeptList } from "@/api/management";
import { getOrderUsersList } from "@/api/partner";
import store from "@/store";
import { mapGetters } from "vuex";

export default {
  name: "saleReport",
  data() {
    return {
      roles: store.getters.roles ? store.getters.roles : [],
      activeName: "first",

      listQuery1: JSON.parse(JSON.stringify(defaultListQuery1)),
      tableData1: [],
      count1: 0,
      listLoading1: false,
      btnLoading1: false,
      data: [],
      userOptionList: [],

      listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
      tableData2: [],
      count2: 0,
      listLoading2: false,
      btnLoading2: false,

      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      tableData3: [],
      count3: 0,
      listLoading3: false,
      btnLoading3: false,

      listQuery4: JSON.parse(JSON.stringify(defaultListQuery4)),
      tableData4: [],
      count4: 0,
      listLoading4: false,
      btnLoading4: false,

      listQuery5: JSON.parse(JSON.stringify(defaultListQuery5)),
      tableData5: [],
      count5: 0,
      listLoading5: false,
      btnLoading5: false,

      listQuery6: JSON.parse(JSON.stringify(defaultListQuery6)),
      tableData6: [],
      count6: 0,
      listLoading6: false,
      btnLoading6: false,
    };
  },
  components: { halfyearPicker },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    let sMonth = month - 1 == -1 ? 12 : month;
    sMonth = sMonth < 10 ? "0" + sMonth : sMonth;
    this.listQuery1.month = [year + "-" + sMonth, year + "-" + sMonth];
    this.getList1();
    this.getList2();
    this.getList3();
    this.getList4();
    this.getList5();
    this.getList6();
    this.getBuMenList();
    this.getUserOptionList();
  },
  filters: {
    fifnum(val) {
      if (val) {
        return numberToCurrencyNo(val);
      } else {
        return "";
      }
    },
  },
  methods: {
    //下载excle
    downloadExcel(type) {
      let params, fn;
      if (type == 1) {
        params = JSON.parse(JSON.stringify(this.listQuery1));
        fn = grossProfitList;
        this.btnloading1 = true;
      } else if (type == 2) {
        params = JSON.parse(JSON.stringify(this.listQuery2));
        this.btnloading2 = true;
        fn = customerMouth;
      } else if (type == 3) {
        this.btnloading3 = true;
        params = JSON.parse(JSON.stringify(this.listQuery3));
        fn = getGoodsLineMouth;
      } else if (type == 4) {
        params = JSON.parse(JSON.stringify(this.listQuery4));
        fn = getCustomerCirculation;
        this.btnloading4 = true;
      } else if (type == 5) {
        params = JSON.parse(JSON.stringify(this.listQuery5));
        fn = getSaleAreaMouth;
        this.btnloading5 = true;
      } else if (type == 6) {
        params = JSON.parse(JSON.stringify(this.listQuery6));
        fn = getSaleGoodsPriceMouth;
        this.btnloading6 = true;
      }
      params.export = 1;
      delete params.pageSize;
      delete params.pageNum;
      fn(params)
        .then((res) => {
          this.btnloading2 = false;
          this.btnloading3 = false;
          this.btnloading4 = false;
          this.btnloading5 = false;
          this.btnloading6 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require("sheet/Export2Excel");
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          });
        })
        .catch(() => {
          this.btnloading1 = false;
          this.btnloading2 = false;
          this.btnloading3 = false;
          this.btnloading4 = false;
          this.btnloading5 = false;
          this.btnloading6 = false;
        });
    },

    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    handleSizeChange1(val) {
      this.listQuery1.pageNum = 1;
      this.listQuery1.pageSize = val;
      this.getList1();
    },

    handleCurrentChange1(val) {
      this.listQuery1.pageNum = val;
      this.getList1();
    },

    handleSearchList1() {
      this.listQuery1.pageNum = 1;
      this.getList1();
    },

    //去除不要的children
    forTree(list) {
      let newList = list;
      if (newList.length) {
        for (let i = 0; i < newList.length; i++) {
          if (newList[i].children && newList[i].children.length > 0) {
            this.forTree(newList[i].children);
          } else {
            delete newList[i].children;
          }
        }
        return newList;
      }
    },

    //获取部门列表
    getBuMenList() {
      getDeptList().then((res) => {
        this.data = this.forTree(res);
      });
    },

    //获取员工下拉选项
    getUserOptionList() {
      getOrderUsersList().then((res) => {
        this.userOptionList = res;
      });
    },

    //获取列表
    getList1() {
      this.listLoading1 = true;
      grossProfitList(this.listQuery1)
        .then((response) => {
          this.tableData1 = response.list;
          this.count1 = response.count;
          this.listLoading1 = false;
        })
        .catch(() => {
          this.listLoading1 = false;
        });
    },

    handleSizeChange2(val) {
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },

    handleCurrentChange2(val) {
      this.listQuery2.pageNum = val;
      this.getList2();
    },

    handleSearchList2() {
      this.listQuery2.pageNum = 1;
      this.getList2();
    },

    //获取列表
    getList2() {
      this.listLoading2 = true;
      customerMouth(this.listQuery2)
        .then((response) => {
          this.tableData2 = response.list;
          this.count2 = response.count;
          this.listLoading2 = false;
        })
        .catch(() => {
          this.listLoading2 = false;
        });
    },

    handleSizeChange3(val) {
      this.listQuery3.pageNum = 1;
      this.listQuery3.pageSize = val;
      this.getList3();
    },

    handleCurrentChange3(val) {
      this.listQuery3.pageNum = val;
      this.getList3();
    },

    handleSearchList3() {
      this.listQuery3.pageNum = 1;
      this.getList3();
    },

    //获取列表
    getList3() {
      this.listLoading3 = true;
      getGoodsLineMouth(this.listQuery3)
        .then((response) => {
          this.tableData3 = response.list;
          this.count3 = response.count;
          this.listLoading3 = false;
        })
        .catch(() => {
          this.listLoading3 = false;
        });
    },

    handleSizeChange4(val) {
      this.listQuery4.pageNum = 1;
      this.listQuery4.pageSize = val;
      this.getList4();
    },

    handleCurrentChange4(val) {
      this.listQuery4.pageNum = val;
      this.getList4();
    },

    handleSearchList4() {
      this.listQuery4.pageNum = 1;
      this.getList4();
    },

    //获取列表
    getList4() {
      this.listLoading4 = true;
      getCustomerCirculation(this.listQuery4)
        .then((response) => {
          this.tableData4 = response.list;
          this.count4 = response.count;
          this.listLoading4 = false;
        })
        .catch(() => {
          this.listLoading4 = false;
        });
    },

    handleSizeChange5(val) {
      this.listQuery5.pageNum = 1;
      this.listQuery5.pageSize = val;
      this.getList5();
    },

    handleCurrentChange5(val) {
      this.listQuery5.pageNum = val;
      this.getList5();
    },

    handleSearchList5() {
      this.listQuery5.pageNum = 1;
      this.getList5();
    },

    //获取列表
    getList5() {
      this.listLoading5 = true;
      getSaleAreaMouth(this.listQuery5)
        .then((response) => {
          this.tableData5 = response.list;
          this.count5 = response.count;
          this.listLoading5 = false;
        })
        .catch(() => {
          this.listLoading5 = false;
        });
    },

    handleSizeChange6(val) {
      this.listQuery6.pageNum = 1;
      this.listQuery6.pageSize = val;
      this.getList6();
    },

    handleCurrentChange6(val) {
      this.listQuery6.pageNum = val;
      this.getList6();
    },

    handleSearchList6() {
      this.listQuery6.pageNum = 1;
      this.getList6();
    },

    //获取列表
    getList6() {
      this.listLoading6 = true;
      getSaleGoodsPriceMouth(this.listQuery6)
        .then((response) => {
          this.tableData6 = response.list;
          this.count6 = response.count;
          this.listLoading6 = false;
        })
        .catch(() => {
          this.listLoading6 = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
